<template>
  <div v-for="(fItem, fIndex) in fileList" :key="fIndex" style="color: #A72836; cursor: pointer; display: block; margin-right: 10px;" @click="previewFile(fItem)">
    {{ fItem.name ? fIndex + 1 + '、' + fItem.name + '；' : fIndex + 1 + '、' + fItem.FileName + fItem.FileExtension + '；' }}
  </div>
  <el-dialog title="查看" v-model="previewFileVisible" draggable>
    <div style="text-align: center;">
      <el-image style="width: 313px;"
        :src="imageUrl ? imageUrl : ''" fit="cover" v-if="isImage">
        <template #error>
          <div class="image-slot">
            <el-image style="width: 313px;" src="/images/course_default.png" fit="cover" />
          </div>
        </template>
      </el-image>

      <video
        v-else
        ref="videoRef"
        :src="videoUrl ? videoUrl : ''"
        :width="313"
        :height="170"
        muted
        controls
        loop
        showPlay
        controlslist="nodownload"
      ></video>
    </div>
  </el-dialog>
</template>
<script>
export default { name: "uploadFileResult" }
</script>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  fileList: {},
})

/* 文件预览 */
const imageUrl = ref("")
const videoUrl = ref("")
const isImage = ref(false)
const previewFileVisible = ref(false)
const isFileObject = (obj) => {  
  return obj instanceof File;  
}  
const previewFile = (file) => {
  if(isFileObject(file)) { /* 文件对象 */
    if(file.name.indexOf('jpg') != -1 || file.name.indexOf('jpeg') != -1 || file.name.indexOf('png') != -1 || file.name.indexOf('JPG') != -1 || file.name.indexOf('JPEG') != -1 || file.name.indexOf('PNG') != -1) { /* 图片类型 */
      previewFileVisible.value = true
      isImage.value = true

      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        imageUrl.value = e.target.result
      }
    } else if (file.name.indexOf('mp4') != -1 || file.name.indexOf('MP4') != -1 ) { /* 视频类型 */
      previewFileVisible.value = true
      isImage.value = false
      var reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        videoUrl.value = e.target.result
      }
    } else if (file.name.indexOf('pdf') != -1 || file.name.indexOf('PDF') != -1) {
      var fileUrl = URL.createObjectURL(file);
      window.open(fileUrl)
    } else {
      ElMessageBox.confirm(
        '请选择是否要下载此文件查看？',
        '请确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        var fileUrl = URL.createObjectURL(file);  
        var downloadLink = document.createElement('a');   
        // 设置下载链接的URL和文件名  
        downloadLink.href = fileUrl;  
        downloadLink.download = file.name;  
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      }).catch(() => {
        ElMessage.info("已取消下载")
      })
    }
  } else {
    console.log(file)

    if(file.FileExtension == '.png' || file.FileExtension == '.PNG' || file.FileExtension == '.jpg' || file.FileExtension == '.JPG' || file.FileExtension == '.jpeg' || file.FileExtension == '.JPEG') {
      previewFileVisible.value = true
      isImage.value = true
      imageUrl.value = import.meta.env.VITE_APP_STATIC_URL + file.CompleteFilePath

      console.log(imageUrl.value)
    }
  }
}
</script>